<template>
	<view class="container">
		<header-bar :title="title"></header-bar>
		<u-tabs-swiper ref="ordertabs" :list="tabslist" gutter="155" active-color="rgba(255, 157, 93, 1)" :bold="false" v-on:change="changeOrderlist"></u-tabs-swiper>
		<view class="scrollview-fa" :style="{height:scrollviewHeight+'rpx'}">
			<swiper :current="tabcurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item v-for="(item,index) in tabslist" :key="index">
					<!-- 待接单 -->
					 <scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',width:'100%',paddingBottom:'15rpx'}" v-if="index==0">
					 	<view class="ordercard" v-for="item in 10">
					 		<view class="cardtop">
					 			<text class="worktype">工种：{{'开锁'}}</text>
								<view class="workprice">
									<text>{{price.toFixed(2)|addPaysign}}</text>
									<u-icon name="/static/navigate.png" size="30"></u-icon>
								</view>
					 		</view>
							<view class="orderservice">
								<view class="serviceitem">
									<text class="servicetitle">上门时间：</text>
									<text class="servicevalue">9月5日 5:00 至 6:00</text>
								</view>
								<view class="serviceitem">
									<text class="servicetitle">客户姓名：</text>
									<text class="servicevalue">李静</text>
								</view>
								<view class="serviceitem">
									<text class="servicetitle">上门地址：</text>
									<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
								</view>
							</view>
							<!-- 根据订单状态判断显示哪组按钮 -->
							<view class="ordercard-btns">
								<view class="ordercard-btnitem firstbtn" @click="openTakeorderModal('拒单')">
									<text>拒单</text>
								</view>
								<view class="ordercard-btnitem secondbtn" @click="openTakeorderModal('接单')">
									<text>接单</text>
								</view>
							</view>
					 	</view>
					 </scroll-view>
					 <!-- 预约接单 -->
					 <scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',width:'100%'}" v-if="index==1">
					 	<view class="ordercard">
					 		<view class="cardtop">
					 			<text class="worktype">工种：{{'开锁'}}</text>
					 			<view class="workprice">
					 				<text>{{price.toFixed(2)|addPaysign}}</text>
					 				<u-icon name="/static/navigate.png" size="30"></u-icon>
					 			</view>
					 		</view>
					 			<view class="orderservice">
					 				<view class="serviceitem">
					 					<text class="servicetitle">上门时间：</text>
					 					<text class="servicevalue">9月5日 5:00 至 6:00</text>
					 			    </view>
					 			    <view class="serviceitem">
					 					<text class="servicetitle">客户姓名：</text>
					 					<text class="servicevalue">李静</text>
					 				</view>
					 				<view class="serviceitem">
					 					<text class="servicetitle">上门地址：</text>
					 					<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
					 				</view>
					 			</view>
					 			<!-- 根据订单状态判断显示哪组按钮 -->
					 			<view class="ordercard-btns">
					 				<view class="ordercard-btnitem firstbtn" @click="openTakeorderModal('拒单')">
					 					<text>拒单</text>
					 				</view>
					 				<view class="ordercard-btnitem secondbtn" @click="openTakeorderModal('接受预约')">
					 					<text>接受预约</text>
					 				</view>
					 			</view>
					 	</view>
					 </scroll-view>
					 <!-- 已接单 -->
					 <scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',width:'100%'}" v-if="index==2">
					 	<view class="ordercard">
					 		<view class="cardtop">
					 			<text class="worktype">工种：{{'开锁'}}</text>
					 			<view class="workprice">
					 				<text>{{price.toFixed(2)|addPaysign}}</text>
					 				<u-icon name="/static/navigate.png" size="30"></u-icon>
					 			</view>
					 		</view>
					 			<view class="orderservice">
					 				<view class="serviceitem">
					 					<text class="servicetitle">上门时间：</text>
					 					<text class="servicevalue">9月5日 5:00 至 6:00</text>
					 			    </view>
					 			    <view class="serviceitem">
					 					<text class="servicetitle">客户姓名：</text>
					 					<text class="servicevalue">李静</text>
					 				</view>
					 				<view class="serviceitem">
					 					<text class="servicetitle">上门地址：</text>
					 					<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
					 				</view>
					 			</view>
					 			<!-- 根据订单状态判断显示哪组按钮 -->
					 			<view class="ordercard-btns">
					 				<view class="ordercard-btnitem secondbtn" @click="openTakeorderModal('已上门')">
					 					<text>已上门</text>
					 				</view>
					 			</view>
					 	</view>
					 </scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bottombtn-back">
			<view class="beonline-btn">
				<u-icon name="/static/upload.png" size="40"></u-icon>
				<text>上线</text>
			</view>
		</view>
		<!-- 在线接单-状态 模态框 -->
		<u-modal title="温馨提示" v-model="showTakeorderModal" :content="prompttext|addStatusPrompt" :show-cancel-button="true" cancel-color="rgba(135, 135, 135, 1)" confirm-color="rgba(13, 173, 99, 1)" :mask-close-able="true"></u-modal>
	</view>
</template>

<script>
	import headerBar from '@/components/header_bar/headerBar.vue'
	export default {
		components:{
			headerBar
		},
		data() {
			return {
				title:'我的订单',
				tabslist: [{
						name: '待接单'
					}, {
						name: '预约接单'
					}, {
						name: '已接单'
					}],
				scrollviewHeight:0,
				tabcurrent:0,
				price:120,
				showTakeorderModal:false,
				prompttext:''
            }
		},
		onLoad() {
			const windowHeight=uni.getSystemInfoSync().windowHeight;
			this.scrollviewHeight=windowHeight/(uni.upx2px(windowHeight)/windowHeight)-230;
		},
		methods: {
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.ordertabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.ordertabs.setFinishCurrent(current);
				this.tabcurrent = current;
			},
			changeOrderlist(current){
				this.tabcurrent=current;
			},
			openTakeorderModal(prompttext){
				this.prompttext=prompttext;
				this.showTakeorderModal=true;
			}
		},
		filters:{
			addPaysign:function(val){
				return '￥'+val;
			},
			addStatusPrompt:function(val){
				return '确定'+val+'吗？'
		    }
		}
	}
</script>

<style lang="scss">
       page{
		   width: 100%;
		   height: 100%;
	   }
	   .container{
		   width: 100%;
		   min-height: 100%;
		   background-color: rgba(243, 247, 251, 1);
		   .scrollview-fa{
			   width: 100%;
			   swiper{
				   width: 100%;
				   height: 100%;
				   display: flex;
				   justify-content: center;
			   }
			   .ordercard{
				   width: 710upx;
				   height: auto;
				   background-color: #FFFFFF;
				   border-radius: 15upx;
				   margin: auto;
				   padding-top: 40upx;
				   margin-top: 15rpx;
				   .cardtop{
					   width: 100%;
					   display: flex;
					   justify-content: space-between;
				   }
				   .worktype{
					   font-weight: bold;
					   font-size: 30upx;
					   margin-left: 20upx;
					   display: block;
					   width: 350upx;
					   white-space:nowrap;
					   overflow:hidden;
					   text-overflow:ellipsis;
				   }
				   .workprice{
					   margin-right: 20upx;
					   color: rgba(255, 0, 0, 1);
					   font-weight: blod;
					   display: inline-flex;
					   font-size: 30upx;
				   }
				   .orderservice{
					   width: 670upx;
					   margin: auto;
					   height: auto;
					   padding-bottom: 20upx;
					   border-bottom: 1upx solid #F1F1F1;
					   .serviceitem{
					   		width: 100%;
					   		height: auto;
					   		display: flex;
					   		margin-top: 20upx;
					   		color: rgba(34, 34, 34, 1);
					   		font-size: 30upx;
					   		.servicetitle{
					   			display: block;
					   			word-break: break-all;
					   		}
					   	    .servicevalue{
					   			display: block;
					   			width: 500upx;
					   		    word-break: break-all;
					   	    }
					   }
				   }
				   .ordercard-btns{
					   width: 100%;
					   height: 100upx;
					   display: flex;
					   justify-content: flex-end;
					   align-items: center;
					   view{
						   margin-right: 20upx;
						   width: 200upx;
						   height: 70upx;
						   border-radius: 10upx;
						   font-size: 28upx;
						   display: flex;
						   align-items: center;
						   justify-content: center;
					   }
					   .firstbtn{
						   border: 1upx solid #F1F1F1;
						   box-sizing: border-box;
						   color: rgba(33, 33, 33, 1);
					   }
					   .secondbtn{
						   background-color: #2979ff;
						   color: #FFFFFF;
					   }
				   }
			   }
		   }
		   .bottombtn-back{
			   background-color: #FFFFFF;
			   width: 100%;
			   height: auto;
			   padding-top: 15rpx;
			   padding-bottom: 15rpx;
			   position: fixed;
			   bottom: 0rpx;
		   }
		   .beonline-btn{
			   background-color: rgba(13, 173, 99, 1);
			   color: #FFFFFF;
			   width: 680upx;
			   height: 90rpx;
			   font-size: 30upx;
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   margin: auto;
			   text{
				   margin-left: 20upx;
			   }
			   border-radius: 10upx;
		   }
	   }
</style>
